<template>
  <div id="ny-iqc">
    <router-view />
  </div>
</template>

<script>

import { mapState } from 'vuex'
import { colorToRGB } from '@/utils/index'

export default  {
  name:  'App',
  data(){
    return {
      theme_disable: '#DCDFE6'
    }
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      headCol: state => state.settings.headCol,
    }),
    head_theme_light(){
      return this.ColorLuminance(this.headCol,0.5)
    },
    head_theme_dark(){
      return this.ColorLuminance(this.headCol,-0.3)
    },
    body_theme_light(){
      return this.ColorLuminance(this.theme,0.2)
    },
    body_theme_dark(){
      return this.ColorLuminance(this.theme,-0.3)
    },
    body_theme_disable(){
      return this.theme_disable
    },
  },
  watch:{
    headCol: {
      handler(val){
        if(val){
          document.body.style.setProperty(`--current-head-theme`, val);
          document.body.style.setProperty(`--current-head-light`, this.head_theme_light);
          document.body.style.setProperty(`--current-head-dark`, this.head_theme_dark);
        }
      },
      immediate: true,
    },
    theme:{
      handler(val){
        if(val){
          document.body.style.setProperty(`--current-color`, val);
          document.body.style.setProperty(`--current-light`, this.body_theme_light);
          document.body.style.setProperty(`--current-dark`, this.body_theme_dark);
          document.body.style.setProperty(`--current-disable`, this.body_theme_disable);
          document.body.style.setProperty(`--current-tab-bg`, colorToRGB(val,0.1));
        }
      },
      immediate: true,
    }
  },
  created() {
  },
  methods:{
         ColorLuminance(hex, lum) {
            // validate hex string
            hex = String(hex).replace(/[^0-9a-f]/gi, '');
            if (hex.length < 6) {
              hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
            }
            lum = lum || 0;

            // convert to decimal and change luminosity
            var rgb = "#", c, i;
            for (i = 0; i < 3; i++) {
              c = parseInt(hex.substr(i*2,2), 16);
              c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
              rgb += ("00"+c).substr(c.length);
            }
            return rgb;
      }
  },
    metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
    }
}
</script>
<style lang="scss" scoped>
#ny-iqc{
  height:100%
}
</style>
